<template>
  <div class="chart-container">
    <h3>价格趋势分析</h3>
    <v-chart class="chart" :option="chartOption" />
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import VChart from 'vue-echarts';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components';
import type { XiangQing } from '../types';

use([
  CanvasRenderer,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
]);

interface Props {
  data: XiangQing[];
}

const props = defineProps<Props>();

const chartOption = computed(() => {
  // 按商品名称分组，计算平均价格
  const priceData = props.data.reduce((acc, item) => {
    const name = item.productName || '未知商品';
    if (!acc[name]) {
      acc[name] = {
        prices: [],
        quantities: []
      };
    }
    acc[name].prices.push(item.price || 0);
    acc[name].quantities.push(item.num || 0);
    return acc;
  }, {} as Record<string, { prices: number[]; quantities: number[] }>);

  // 计算平均价格和总数量
  const chartData = Object.entries(priceData).map(([name, data]) => ({
    name,
    avgPrice: data.prices.reduce((sum, price) => sum + price, 0) / data.prices.length,
    totalQuantity: data.quantities.reduce((sum, qty) => sum + qty, 0)
  }));

  // 按平均价格排序，取前10个
  const sortedData = chartData
    .sort((a, b) => b.avgPrice - a.avgPrice)
    .slice(0, 10);

  return {
    title: {
      text: '商品价格趋势',
      left: 'center',
      textStyle: {
        color: '#fff',
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: ['平均价格', '总数量'],
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: sortedData.map(item => item.name),
      axisLabel: {
        color: '#fff',
        rotate: 45
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '价格',
        axisLabel: {
          color: '#fff'
        }
      },
      {
        type: 'value',
        name: '数量',
        axisLabel: {
          color: '#fff'
        }
      }
    ],
    series: [
      {
        name: '平均价格',
        type: 'line',
        data: sortedData.map(item => item.avgPrice),
        smooth: true,
        lineStyle: {
          color: '#ff6b6b'
        },
        itemStyle: {
          color: '#ff6b6b'
        }
      },
      {
        name: '总数量',
        type: 'line',
        yAxisIndex: 1,
        data: sortedData.map(item => item.totalQuantity),
        smooth: true,
        lineStyle: {
          color: '#4ecdc4'
        },
        itemStyle: {
          color: '#4ecdc4'
        }
      }
    ]
  };
});
</script>

<style scoped>
.chart-container {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  height: 400px;
}

.chart-container h3 {
  margin: 0 0 20px 0;
  text-align: center;
  color: #fff;
}

.chart {
  height: 320px;
}
</style> 